<p class="mb-4">
  <% if @user.plan.stripe_id == "trial" %>
    <% if @user.days_left <= 0 %>
      Your trial has ended. Subscribe now to continue using Feedbin.
    <% else %>
      Your trial period will end in <strong><%= pluralize(@user.days_left, 'day') %></strong>. Subscribe now to continue using Feedbin uninterrupted.
    <% end %>
  <% end %>
</p>

<%= form_for @user, html: {id: "payment-form"} do |f| %>
  <%= f.hidden_field :stripe_token, id: 'stripe_token' %>
  <%= hidden_field_tag :redirect_to, settings_billing_url %>

  <%= render Settings::ControlGroupComponent.new class: "mb-14" do |group| %>
    <% group.header do %>
      <%= subscribe_title %>
    <% end %>

    <% @plans.each do |plan| %>
      <%
      options = {
        id: dom_id(plan),
        class: "peer",
        data: {
          plan_id: plan.id,
          name: plan.name,
          amount: number_to_currency(plan.price, unit: ""),
          behavior: "plan_select"
        }
      }
      if plan == @default_plan
        options[:checked] = true
      end
      %>
      <% group.item do %>
        <%= f.radio_button :plan_id, plan.id, options %>
        <%= label_tag nil, for: dom_id(plan), class: "group" do %>
          <%= render Settings::ControlRowComponent.new do |row| %>
            <% row.title do %>
              <%= number_to_currency(plan.price, precision: 0) %>/<%= plan.period %>
            <% end %>
            <% row.control { render Form::RadioComponent.new } %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>

  <%= render partial: "shared/credit_card_form" %>

  <div class="subscribe-description">
    <% @plans.each do |plan| %>
        <% if @user.trial_end.future? %>
            <% if plan.name == "Monthly" %>
                <p class="<%= plan == @default_plan ? '' : 'hide' %>" data-behavior="billing_help_text" data-plan-id="<%= dom_id(plan) %>">
                    Subscribing will charge your card <strong><%= number_to_currency(plan.price, precision: 0) %></strong> when your <%= plan_name %> ends on <strong><%= @user.trial_end.to_formatted_s(:date) %></strong> and again each month thereafter. Full refunds are available at any time, no questions asked.
                </p>
            <% else %>
                <p class="<%= plan == @default_plan ? '' : 'hide' %>" data-behavior="billing_help_text" data-plan-id="<%= dom_id(plan) %>">
                    Subscribing will charge your card <strong><%= number_to_currency(plan.price, precision: 0) %></strong> when your <%= plan_name %> ends on <strong><%= @user.trial_end.to_formatted_s(:date) %></strong> and again each year thereafter. Full refunds are available at any time, no questions asked.
                </p>
            <% end %>
        <% else %>
            <% if plan.name == "Monthly" %>
                <p class="<%= plan == @default_plan ? '' : 'hide' %>" data-behavior="billing_help_text" data-plan-id="<%= dom_id(plan) %>">
                    Subscribing will charge your card <strong><%= number_to_currency(plan.price, precision: 0) %></strong> immediately and again each month thereafter. Full refunds are available at any time, no questions asked.
                </p>
            <% else %>
                <p class="<%= plan == @default_plan ? '' : 'hide' %>" data-behavior="billing_help_text" data-plan-id="<%= dom_id(plan) %>">
                    Subscribing will charge your card <strong><%= number_to_currency(plan.price, precision: 0) %></strong> immediately and again each year thereafter. Full refunds are available at any time, no questions asked.
                </p>
            <% end %>
        <% end %>
    <% end %>
  </div>

  <%= render Settings::ButtonRowComponent.new do %>
    <div id="payment_request_button"><small>Loading…</small></div>
    <button type="submit" class="button no-margin" id="credit_card_button" disabled data-disable-with="false">Subscribe</button>
  <% end %>
<% end %>
